<template>
    <span style="position:relative">
        <input ref="input" class="my-input" :value="value" @input="inputEvent"/>
        <span class="delete-icon" v-show="clearable && value !==''" @click="closeEvent">
            <div class="iconfont icon-butongguodechacha" />
        </span>
    </span>
</template>
<script>
export default {
    name:"MyInput",
    props:{
        value:String,
        clearable:Boolean
    },
    data() {
        return{};
    },
    methods:{
        inputEvent(event){
            this.$emit("input",event.target.value);
        },
        closeEvent(){
            this.$emit("input",'');
            this.$ref.input.focus();
        }
    }
};
</script>
<style scoped>
.my-input{
    width:200px;
    height:40px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 14px;
}
.my-input:focus{
    border:1px solid #409eff ;
}
.delete-icon{
    position:absolute;
    right: 10px;
    color: #999;
    cursor:pointer;
    top:50%;
    margin-top: -6.5px;
}
.delete-icon:hover{
    color: #333;
}
</style>